<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
  <script src="js/axios.min.js"></script>
</head>
<body>
  <div id="app">
    <h3>Welcome {{uname}}</h3>
    <!--显示商城首页6个商品的列表-->
    <ul>
      <li>
        编号 | 详细信息 | 单价
      </li>
      <li v-for="(p,i) of arr" :key="i">
        {{p.pid}}|{{p.details}}|¥{{p.price.toFixed(2)}}
      </li>
    </ul>
  </div>
  <script>
    var vm=new Vue({
      el:"#app",
      data:{
        uname:"dingding",
        arr:[]
      },
      /*必经阶段*/
      beforeCreate(){
        console.log(`创建阶段前自动触发...`)
      },
      created(){ //模型对象创建后
        console.log(`创建阶段后自动触发...`)
      },
      beforeMount(){
        console.log(`挂载阶段前自动触发...`)
      },
      mounted(){
        console.log(`挂载阶段后自动触发...`)
      },
      /*不是必经阶段*/
      beforeUpdate(){
        console.log(`更新前自动触发...`)
      },
      updated(){
        console.log(`更新后自动触发...`)
      },
      beforeDestroy(){
        console.log(`销毁前自动触发...`)
      },
      destroyed(){
        console.log(`销毁后自动触发...`)
      }
    });
    //在控制台中手写
    //触发更新阶段: 
    //vm.uname="丁丁"
    //触发销毁阶段:
    //vm.$destroy()
  </script>
</body>
</html>